<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>查询账户余额</title>
    <style>
        .container { width: 50%; margin: 50px auto; padding: 20px; border: 1px solid #ddd; }
        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 8px; }
        input, .result { width: 100%; padding: 10px; border: 1px solid #ddd; box-sizing: border-box; }
        .btn { background-color: #2c6ecb; color: white; border: none; padding: 10px 20px; cursor: pointer; }
        .error { color: red; }
        .success { color: green; }
        .account-info p { margin: 8px 0; }
    </style>
</head>
<body>
<div class="container">
    <h3>查询账户余额</h3>
    <form id="balanceForm">
        <div class="form-group">
            <label for="accountId">账户ID</label>
            <input type="text" id="accountId" name="accountId" required min="1" value="001">
        </div>
        <button type="submit" class="btn">查询</button>
    </form>

    <div class="form-group">
        <label>查询结果</label>
        <div class="result" id="queryResult">请输入账户ID并查询</div>
    </div>
</div>

<script>
    document.getElementById('balanceForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const accountId = document.getElementById('accountId').value;
        const resultDiv = document.getElementById('queryResult');

        resultDiv.innerHTML = '查询中...';
        resultDiv.className = 'result';

        // 发送AJAX请求
        fetch(`/balance/enquiry?accountId=${accountId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态码: ${response.status}`);
                }
                return response.json();
            })
            .then(jsonResult => {
                // 调试输出，查看实际返回的数据结构
                console.log('后端返回的数据:', jsonResult);

                // 检查jsonResult是否存在以及是否有code属性
                if (jsonResult && typeof jsonResult.code !== 'undefined') {
                    if (jsonResult.code === 2000) { // 成功
                        const account = jsonResult.data;
                        resultDiv.innerHTML = `
                            <div class="account-info">
                                <p><strong>账户ID:</strong> ${account.accountId}</p>
                                <p><strong>账号:</strong> ${account.accountNumber}</p>
                                <p><strong>余额:</strong> ¥${account.balance.toFixed(2)}</p>
                                <p><strong>账户类型:</strong> ${account.accountType}</p>
                                <p><strong>状态:</strong> ${account.status}</p>
                            </div>
                        `;
                        resultDiv.className = 'result success';
                    } else { // 业务错误
                        resultDiv.textContent = `错误: ${jsonResult.msg || '未知错误'}`;
                        resultDiv.className = 'result error';
                    }
                } else {
                    resultDiv.textContent = '错误: 响应数据格式不正确';
                    resultDiv.className = 'result error';
                }
            })
            .catch(error => {
                // 网络或解析错误
                console.error('请求失败:', error);
                resultDiv.textContent = `请求失败: ${error.message}`;
                resultDiv.className = 'result error';
            });
    });
</script>
</body>
</html>